<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- <form action="" method="get">
        <input type="text" name="username">
        <input type="password" name="password">
        <button>上传</button>
    </form> -->


    <form>
        <input type="file" name="ups">
        <button type="submit">上传</button>
    </form>

    <script>

        // 
        const oForm = document.querySelector('form') ;

        oForm.onsubmit = function(e) {
            // 阻止默认事件
            e.preventDefault() ;

            // 文件上传需要用post请求


            // FormData(form)  接收原本的form中的内容 
            // 注意：原本的form中的input元素 一定要记得写name      就是后端要求的字段
            const fm = new FormData(oForm);


            const xhr2 = new XMLHttpRequest();
            xhr2.open('post', '/api/users/upFile', true);
            
            // 这里的请求头只能处理普通的字符串参数
            // xhr2.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr2.send(fm);   // 就是原form中的数据
            // xhr2.send() ;

            xhr2.onreadystatechange = function () {
                if (xhr2.readyState === 4 && xhr2.status === 200) {
                    console.log(xhr2.responseText);
                }
            }
        }
    </script>
    
</body>
</html>